<template>
    <div ref="chart" class="echarts-chart" />
</template>

<script setup lang="ts">

import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { dataTypeCount } from '../api/index'
const chart = ref(null);
let myChart = null;

// ECharts 配置
let option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: [], // 初始为空，后续动态填充
        icon: 'circle',
        textStyle: {
            color: '#ffffff',
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [] // 初始为空，后续动态填充
    },
    yAxis: {
        type: 'value'
    },
    series: [] // 初始为空，后续动态填充
};
const initChart = () => {
    myChart = echarts.init(chart.value);
    myChart.setOption(option);
};
// 格式化数据
function formatDataForECharts(data) {
    const seriesData = {};
    const xAxisData = new Set(); // 使用 Set 来去重
    const legendData = new Set(); // 使用 Set 来去重

    // 遍历原始数据
    data.forEach(item => {
        const { series, xaxis, yaxis } = item;

        // 如果系列不存在，则初始化
        if (!seriesData[series]) {
            seriesData[series] = {
                name: series,
                data: []
            };
        }

        // 将数据添加到相应的系列中
        seriesData[series].data.push(yaxis);
        xAxisData.add(xaxis); // 添加 x 轴数据
        legendData.add(series); // 添加图例数据
    });

    // 将对象转换为数组
    return {
        series: Object.values(seriesData),
        xAxis: Array.from(xAxisData),
        legend: Array.from(legendData)
    };
}
//合并ECharts 配置
function mergeSeries(option, newData) {
    const existingSeries = option.series.reduce((acc, series) => {
        acc[series.name] = series;
        return acc;
    }, {});

    // 遍历新数据并合并
    newData.series.forEach(newSeries => {
        const seriesName = newSeries.name;
        const seriesData = newSeries.data;

        if (existingSeries[seriesName]) {
            // 如果存在，则更新数据
            existingSeries[seriesName].data = seriesData;
        } else {
            // 如果不存在，则新增系列
            option.series.push({
                name: seriesName,
                type: 'line',
                stack: 'Total',
                data: seriesData,
                itemStyle: {
                    color: getColorForSeries(seriesName), // 根据系列名称获取颜色
                },
                symbol: 'none', // 不显示节点
            });
        }
    });

    // 删除原始数据中没有的系列
    option.series = option.series.filter(series => newData.series.some(newSeries => newSeries.name === series.name));

    // 更新 legend 和 xAxis
    option.legend.data = newData.legend;
    option.xAxis.data = newData.xAxis;
}

// 根据系列名称返回对应的颜色
function getColorForSeries(seriesName) {
    const colorMap = {
        '猪小肠': '#FF25E6',
        '氢氧化钠': '#3195FF',
        '树脂': '#3134FF',
        '碱性蛋白酶': '#FF2525',
        '酒精': '#FFC925',
        '肠衣盐': '#36F8FF'
    };
    return colorMap[seriesName] || '#000000'; // 默认颜色为黑色
}

onMounted(async () => {
    //获取数据
    let dataTypeCountData:any = await dataTypeCount({})
    const inputData = dataTypeCountData.data
    // 调用函数并获取格式化后的数据
    const eChartsData = formatDataForECharts(inputData);

    // 合并数据
    mergeSeries(option, eChartsData);

    // 输出最终的 option
    console.log(option);


    initChart();
    window.addEventListener('resize', myChart.resize); // 监听窗口大小变化

});

onBeforeUnmount(() => {
    document.removeEventListener('resize', myChart.resize)
    myChart.dispose(); // 组件卸载时销毁图表实例
});
</script>

<style scoped>
.echarts-chart {
    width: 100%;
    height: 100%;
    /* 根据需要调整高度 */
}
</style>
